
<template>
  <el-form  style="height:90vh" >
    <el-form-item>
      <div class="fs-2 mx-auto">个人信息</div>
    </el-form-item>
    <el-form-item>
      <el-row class="mx-auto w-50">
      <el-col :span="6" class="text-end">
        <span class="fs-6">用户名：</span>
      </el-col>
      <el-col :span="18">
        <el-input v-model="person.username" placeholder="用户名" disabled></el-input>
      </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-row class="mx-auto w-50">
      <el-col :span="6" class="text-end">
        <span class="fs-6">修改密码：</span>
      </el-col>
      <el-col :span="18">
      <el-input v-model="person.password" placeholder="密码"></el-input>
      </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-row class="mx-auto w-50">
      <el-col :span="6" class="text-end">
        <span class="fs-6">笔名：</span>
      </el-col>
      <el-col :span="18">
      <el-input v-model="person.authorName" placeholder="昵称"></el-input>
      </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-row class="w-50 mx-auto">
        <el-col :span="6" class="text-end">
          <span class="fs-6">性别：</span>
        </el-col>
        <el-col :span="18">
      <el-radio v-model="person.gender" label="1">男</el-radio>
      <el-radio v-model="person.gender" label="2" > 女</el-radio>
      <el-radio v-model="person.gender" label="3" >保密</el-radio>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item > 
      <el-row class="w-50 mx-auto">
        <el-col :span="6" class="text-end">
           <span class="fs-6">头像：</span>
        </el-col>
        <el-col :span="18" >
          <!-- v-bind 缩写:   绑定一个属性-->
          <el-upload :action="uploadPath" :on-success="imgOnSuccess">
            <img v-if="person.headUrl" :src="person.headUrl" class="headImg " />
            <el-icon v-else class="headImg border"><Plus /></el-icon>
          </el-upload>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" class="mx-auto" @click="saveAuthorInfo">提交</el-button>
      </el-form-item>

  </el-form>
</template>

<script>
import { Plus } from "@element-plus/icons-vue";
import { baseURL } from "@/axios/axios-http.js";
import auth from '@/auth/auth.js'

export default {
  name: "SpaceInfo",
  components:{
    Plus
  },
  data(){
    return{
      //上传路径
      uploadPath:baseURL+"/api/upload",
      person:{
        username:null,
        password:null,
        confirmPass:null,
        authorName:null,
        headUrl:null,
        gender:null,
      },
    };
  },

methods:{
  //图片上传成功后的处理函数
  imgOnSuccess(response){
    let downloadUrl = response.data
    this.person.headUrl = downloadUrl
  },
  loadAuthorInfo(){
    this.person = auth.getLoginUser();
  },
  saveAuthorInfo(){
    this.$axios
    .post("/api/space/person/edit",this.person)
    .then(response =>{
      let data = response.data
      if(data.code == 200){
        let nowLoginUser = data.data;
        auth.updateLoginUser(nowLoginUser)
      }
      alert(data.msg);
    })
  }
  },
  mounted(){
    this.loadAuthorInfo();
  
  }
  
};




</script>

<style scoped>
.headImg{
  width: 5rem;
  height: 5rem;
  border-radius: 20%;

}

</style>